<template>
  <div class="dashboard">
    <!-- 周期访客统计 -->
    <div class="dashboard-chart" ref="visitChart" style="width: 600px; height: 400px"></div>

    <!-- 视频类型播放统计[饼图] -->
    <div class="dashboard-chart" ref="typeChart" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';

// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

import { getDataRecord } from "@/api/data";

export default {
  name: "dashboard",
  data() {
    return {
      dailyRequestRecordData: [],
      weeklyTypeRecordData: []
    };
  },

  mounted() {
    this.getDataRecord().then(() => {
      this.userVisitData();
      this.videoTypeData();
    });
  },

  beforeDestroy() {
    // 销毁图表实例
    this.visitChart.dispose();
    this.typeChart.dispose();
  },

  methods: {
    async getDataRecord() {
      const res = await getDataRecord();
      this.dailyRequestRecordData = res.data.dailyRequestRecordList.map(
        item => item.requestCount
      );
      this.weeklyTypeRecordData = res.data.weeklyTypeRecordVoList;
    },

    userVisitData() {
      this.visitChart = echarts.init(this.$refs.visitChart);
      this.visitChart.setOption({
        title: {
          text: "上周访客统计",
          left: "left"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["访客量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "访客量",
            type: "line",
            stack: "Total",
            data: this.dailyRequestRecordData
          }
        ]
      });
    },

    videoTypeData() {
      this.typeChart = echarts.init(this.$refs.typeChart);
      this.typeChart.setOption({
        title: {
          text: "上周播放量统计",
          left: "center",
          bottom: "10px"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "视频类型播放量统计",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.weeklyTypeRecordData
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-chart {
  display: inline-block;
}

.dashboard-chart:last-child {
  margin-left: 20px;
}
</style>
